<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>综合统计-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--colligate-->
		<section class="colligate">
			<div class="cg-tit">
				<span>综合统计</span>
			</div>
			<div class="cg-up">
				<dl>
					<dt>总订单数</dt>
					<dd>383</dd>
				</dl>
				<dl>
					<dt>用户数</dt>
					<dd>128</dd>
				</dl>
				<dl>
					<dt>油枪数</dt>
					<dd>29</dd>
				</dl>
				<dl>
					<dt>剩余短信</dt>
					<dd>104844</dd>
				</dl>
			</div>
			<div class="cg-tit">
				<span>支付数据</span>
			</div>
			<div class="cg-up">
				<dl>
					<dt>油品净收入</dt>
					<dd>¥81166.97</dd>
				</dl>
				<dl>
					<dt>非油品净收入</dt>
					<dd>¥6206.00</dd>
				</dl>
				<dl>
					<dt>充值收入</dt>
					<dd>¥10179652.47</dd>
				</dl>
			</div>
		</section>
		<!--/colligate-->
	
		<!--colligate-data-->
		<section class="colligate-data">
			
			<div class="cg-time">
				<span class="active">最近7天</span>
				<span>最近30天</span>
			</div>
			
			<div class="cg-data">
				<input type="text" name="search_time" id="search_time"  placeholder="查询时间" autocomplete="off" class="layui-input">
				<input type="button" value="查询" class="cg-btn-green"/>
				<input type="button" value="复位" class="cg-btn-gray" />
			</div>
			
			<div class="cg-content" style="height: 430px">
				<div id="main2" class="cg-range">
					
				</div>
			</div>
			
			
			
			
			<div class="cg-container">
				<div class="layui-row layui-col-space22">
					<div class="layui-col-sm4 ">
	                    <div class="cg-title">
	                        <h5 style="color:#676a6c;">订单销售汇总</h5>
	                    </div>
	                        <div id="main8" class="cg-n" style="height: 420px;">
	
	                        </div>

					</div>
					<div class="layui-col-sm4">
	                    <div class="cg-title">
	                        <h5 style="color:#676a6c;">柴油/汽油销售总量</h5>
	                    </div>
	                      <div id="main5" class="cg-n" style="height: 420px;">
	
	                    </div>
						
					</div>
					<div class="layui-col-sm3">
	                    <div class="cg-title">
	                        <h5 style="color:#676a6c;">手机绑定分析</h5>
	                    </div>
	                      <div id="main4" class="cg-n" style="height: 420px;">
	
	                    </div>
					</div>
				</div>	
			</div>
		</section>
		<!--/colligate-data-->
		
	</section>

<!--js-->
<aside>
<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js" ></script>
<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/echartsConfig.js"></script>
<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/ext.js"></script>
<script type="text/javascript" src="../layui/layui.js" ></script>

	<script type="text/javascript">
		layui.use('laydate',function(){
			var laydate=layui.laydate;
				laydate.render({
			        elem: '#search_time', //指定元素
			        type: 'datetime',  //开启时间
			        range: '/'         //开启连续时间，并指定分隔符
			    });
		})
		
 	 var myChart = echarts.init(document.getElementById('main2'));
    function getColorPalette(name) {
        name = name || window.chartCfg.themeName;
        return window.chartCfg.colors;
    }

    var oldToolBox = [];
    var baseOption = {
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false,
                    optionToContent: function(opt) {
                        var axisData = opt.xAxis[0].data;
                        var series = opt.series;
                        var table = '<table style="width:100%;text-align:center"><tbody><tr>' +
                            '<td>' + (opt.xAxis[0].name || '时间') + '</td>' +
                            '<td>' + series[0].name + '</td>' +
                            '<td>' + series[1].name + '</td>' +
                            '<td>' + series[2].name + '</td>' +
                            '<td>' + series[3].name + '</td>' +
                                /*'<td>' + series[4].name + '</td>' +*/
                            '</tr>';
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            table += '<tr>' +
                                '<td>' + axisData[i] + '</td>' +
                                '<td>' + series[0].data[i] + '</td>' +
                                '<td>' + series[1].data[i] + '</td>' +
                                '<td>' + series[2].data[i] + '</td>' +
                                '<td>' + series[3].data[i] + '</td>' +
                                    /*'<td>' + series[4].data[i] + '</td>' +*/
                                '</tr>';
                        }
                        table += '</tbody></table>';
                        return table;
                    }
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar', 'stack', 'tiled']
                },
                restore: {
                    show: false
                },
                saveAsImage: {
                    show: true
                },
                myShare: {
                    show: true,
                    title: 'Share',
                    name: 'share',
                    onclick: function(chart) {
                        var features = chart.option.toolbox[0].feature;

                        zrUtil.each(features, function(index, key) {
                            //console.log(features[key]);
                            if (features[key].name !== 'share' && features[key].show === true) {
                                oldToolBox.push(key);
                            }
                        });

                        //调整工具栏显示
                        zrUtil.each(features, function(index, key) {
                            //console.log(features[key]);
                            if (zrUtil.indexOf(oldToolBox, key) > -1) {
                                features[key].show = !features[key].show;
                            }
                        });

                        zrUtil.map(oldToolBox, function(item, index) {
                            item.show = !item.show;
                            return item;
                        });
                        //console.log(charts[2].chart);
                        shownChart.setOption({
                            toolbox: {
                                feature: features
                            }
                        });
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            padding: 0,
            extraCssText: 'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(255,255,255,0)',
            show: true,
            formatter: function(params) {
                var stl = '';
                $(params).each(function(index, serie) {
                    if (serie.componentType === 'series' && serie.dataIndex > -1) {
                        var colors = myChart.getOption().color;
                        var color = colors[index % colors.length];
                        stl += '<br /> <div style="display:inline-block;width:10px;height:10px;border-radius:5px;background:' + color + ';"></div>&emsp;' + serie.seriesName + ':&emsp;' + serie.value;
                    }
                });
                return stl ? '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + (params[0] ? params[0].name : params.seriesName) + stl + '</div>' : '';
            }
        }
    };

    /*EChart内置辅助类*/
    var zrUtil = echarts.util;
    var zrVector = echarts.vector;
    var zrMatrix = echarts.matrix;
    var zrNumber = echarts.number;
    var zrFormat = echarts.format;
    var zrGraphic = echarts.graphic;

    var opt = {
        title: {
            text: '销售概况'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增客户数量', '加油净营收', '客户积分总量', '闪付', '非油品']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data:["2018-01-26","2018-01-27","2018-01-28","2018-01-29","2018-01-30","2018-01-31","2018-02-01"]    }],
    yAxis: [{
        type: 'value'
    }],
        series: [{
        name: '新增客户数量',
        type: 'line',
        stack: '总量',
        lineStyle: {
            normal: {
                smooth: true
            }
        },
        areaStyle: {
            normal: {
                color: function() {
                    var color = getColorPalette()[0];
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: color.colorRgba(0).toLowerCase()
                    }, {
                        offset: 1,
                        color: color.colorRgba(1).toLowerCase()
                    }]);
                }()
            }
        },
        data:[0,0,1,0,1,1,0]    }, {
        name: '加油净营收',
            type: 'line',
            stack: '总量',
            smooth: true,
            areaStyle: {
            normal: {
                color: function() {
                    var color = getColorPalette()[1];
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: color.colorRgba(0).toLowerCase()
                    }, {
                        offset: 1,
                        color: color.colorRgba(1).toLowerCase()
                    }]);
                }()
            }
        },
        data:["3486.38","642.88","91.48","3349.66","271.44",0,0]    }, {
        name: '客户积分总量',
            type: 'line',
            stack: '总量',
            areaStyle: {
            normal: {
                color: function() {
                    var color = getColorPalette()[2];
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: color.colorRgba(0).toLowerCase()
                    }, {
                        offset: 1,
                        color: color.colorRgba(1).toLowerCase()
                    }]);
                }()
            }
        },
        data:["300.00","140.00","20.00","786.00","60.00",0,0]    }, {
        name: '闪付',
            type: 'line',
            stack: '总量',
            areaStyle: {
            normal: {
                color: function() {
                    var color = getColorPalette()[3];
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: color.colorRgba(0).toLowerCase()
                    }, {
                        offset: 1,
                        color: color.colorRgba(1).toLowerCase()
                    }]);
                }()
            }
        },
        data: [0, 0, 0, 0, 0, 0, 0]
    }, {
        name: '非油品',
            type: 'line',
            stack: '总量',
            label: {
            normal: {
                show: true,
                    position: 'top'
            }
        },
        areaStyle: {
            normal: {
                color: function() {
                    var color = getColorPalette()[4];
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: color.colorRgba(0).toLowerCase()
                    }, {
                        offset: 1,
                        color: color.colorRgba(1).toLowerCase()
                    }]);
                }()
            }
        },
        data:["3486.38","642.88","91.48","3349.66","271.44",0,0]    }]
    };
    option = zrUtil.merge(opt, baseOption, false);
    myChart.setOption(option);
		
		
		
		
		
		 var show4 = echarts.init(document.getElementById('main5'));
    option = {
        title : {
            text: '',
            subtext: '',
            x:'right'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['柴油总原价','汽油总原价','柴油净收入','汽油净收入','柴油总升数','汽油总升数']
        },
        series : [{
                name: '访问来源',
                type: 'pie',
                radius : '47%',
                center: ['50%', '70%'],
                data:[{"value":"2233.36","name":"\u67f4\u6cb9\u603b\u5347\u6570"},{"value":"8740.00","name":"\u67f4\u6cb9\u603b\u539f\u4ef7"},{"value":"7841.84","name":"\u67f4\u6cb9\u51c0\u6536\u5165"},{"value":"0.00","name":"\u6c7d\u6cb9\u603b\u5347\u6570"},{"value":"0.00","name":"\u6c7d\u6cb9\u603b\u539f\u4ef7"},{"value":"0.00","name":"\u6c7d\u6cb9\u51c0\u6536\u5165"}],
          itemStyle: {
           emphasis: {
            shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
          }
        }]
    };
    show4.setOption(option);
    var main8  = echarts.init(document.getElementById('main8'));
    option = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['原价总和','收入总和','优惠总和','销售总升','订单总数']
        },
        series : [
            {
                name: '汇总表',
                type: 'pie',
                radius : '47%',
                center: ['50%', '70%'],
                data:[{"value":55,"name":"\u8ba2\u5355\u603b\u6570"},{"value":"7841.84","name":"\u6536\u5165\u603b\u548c"},{"value":"2233.36","name":"\u9500\u552e\u603b\u5347"},{"value":"907.16","name":"\u4f18\u60e0\u603b\u548c"},{"value":"8740.00","name":"\u539f\u4ef7\u603b\u548c"}],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }}]};
    main8.setOption(option);

    var show3 = echarts.init(document.getElementById('main4'));
    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['手机绑定','游客']
        },
        series: [{
            type: 'pie',
            radius : '65%',
            center: ['50%', '70%'],
            color: [ '#cccccc','#59ADF3', '#AF89D6', '#FF999A', '#FFCC67'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',

                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data:[{"value":21,"name":"\u624b\u673a\u7ed1\u5b9a"},{"value":109,"name":"\u6e38\u5ba2"}]        }]
    };
    show3.setOption(option);
		
	</script>
	
	
</aside>
<!--/js-->
	
	
	
	
</body>
</html>